<!--
 * @Author: jhw jiaxianshengye@gmail.com
 * @LastEditTime: 2025-08-01 12:01:39
 * @LastEditors: jhw
 * @Description: 文件描述
-->
<template>
  <div>
    <VueEsignPlus
      ref="vueEsignRef"
      v-model:bgColor="vueEsignBgColor"
      :is-clear-bg-color="false"
      :width="800"
      :height="400"
      :is-crop="isCrop"
      :line-width="lineWidth"
      :line-color="lineColor"
    />
    <button @click="esignReset">清空画板</button>
    <br />
    <button @click="create">生成图片</button>
    <br />
    <button @click="undo">撤销</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emits = defineEmits(['uploadImage'])

const vueEsignRef = ref<any>(null)
const vueEsignBgColor = ref<string>('rgba(210,210,210,1)')
const lineWidth = ref(6)
const lineColor = ref('#000000')
const isCrop = ref(false)
const img = ref('')

const esignReset = async () => {
  vueEsignRef.value.reset()
}

const create = async () => {
  console.log('vueEsignRef', vueEsignRef.value)
  try {
    const res = await vueEsignRef.value.generate()
    emits('uploadImage', res)

    img.value = res
  } catch (error) {
    console.error('error', error)

    img.value = ''
  }
}

const undo = () => {
  vueEsignRef.value.undo()
}
</script>

<style scoped></style>
